<template>
  <view class="red-gift">
    <view
      class="resultful ml30 mt36 p_re"
      style="
        width: 688rpx;
        height: 226rpx;
        overflow: hidden;
        border: 1px solid #ffdbe3;
      "
    >
      <view class="dis_f ml40 mt16">
        <view class="dfd_c jc">
          <view class="fz60 fw tf_4537">
            <text class="tf_4537 fz30 fw">￥</text>50
          </view>
          <view class="fz22 tf_4537"> 无金额门槛 </view>
        </view>
        <view class="ml50 mt20">
          <view class="">
            <text
              class="fz22 tf_4537"
              style="
                border: 1rpx solid #ffdbe3;
                border-radius: 0 200rpx 200rpx 8rpx;
                padding: 5rpx 8rpx;
              "
              >现金券</text
            >
            <text class="fz28 tf_222 ml10">无门槛10元券</text>
          </view>
          <view class="fz20 tf_999 mt10"> 2022.08.17~2022.08.3 </view>
        </view>
        <view
          class="w120 h50 radius8 dis_f jc fz24 tf"
          style="
            background-image: linear-gradient(to right, #fe877f, #fe2e27);
            margin-top: 35rpx;
            margin-left: 60rpx;
          "
        >
          使用
        </view>
      </view>
      <view class="fz20 tf_999 ml24 mt45 bz mr"> 仅限购买清洁类产品 </view>
      <view class="p_ab" style="top: 0; right: 0">
        <image
          style="width: 80rpx; height:80rpx"
          src="../../static/image/red_d.png"
          mode=""
        ></image>
      </view>
      <view
        class="p_ab tf"
        style="
          font-size: 16rpx;
          top: 20rpx;
          right: 1rpx;
          transform: rotate(45deg);
        "
      >
        2天过期
      </view>
    </view>
    <view
      class="past-due ml30 mt36 p_re"
      style="
        width: 688rpx;
        height: 226rpx;
        overflow: hidden;
        border: 1px solid #d1d2d5;
      "
    >
      <view class="dis_f ml40 mt16">
        <view class="dfd_c jc">
          <view class="fz60 fw tf_999">
            <text class="tf_999 fz30 fw">￥</text>50
          </view>
          <view class="fz22 tf_999"> 无金额门槛 </view>
        </view>
        <view class="ml50 mt20">
          <view class="">
            <text
              class="fz22 tf_999"
              style="
                border: 1rpx solid #d1d2d5;
                border-radius: 0 200rpx 200rpx 8rpx;
                padding: 5rpx 8rpx;
              "
              >现金券</text
            >
            <text class="fz28 tf_999 ml10">无门槛10元券</text>
          </view>
          <view class="fz20 tf_999 mt10"> 2022.08.17~2022.08.3 </view>
        </view>
        <view class="" style="margin-top: 35rpx; margin-left: 60rpx">
          <image
            src="../../static/image/guoqing.png"
            style="width: 128rpx; height: 78rpx"
            mode=""
          ></image>
        </view>
      </view>
      <view class="fz20 tf_999 ml24 mt45 bz mr"> 仅限购买清洁类产品 </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {},
};
</script>

<style lang="scss">
.red-gift {
  .resultful {
    background-image: url(@/static/image/youhui-bg-you.png);
    background-repeat: no-repeat;
  }
  .past-due {
    background-image: url(@/static/image/youhui-guoqi.png);
    background-repeat: no-repeat;
  }
}
</style>
